<!-- 企业认证详情组件 -->
<template>
  <view>
    <view class="px-4 pt-3 pb-20 flex flex-col w-full">
      <u-form ref="form" :model="formData" :label-style="labelStyle" label-width="240" :error-type="['toast']">
        <u-form-item label="企业名称" prop="company_name">
          <u-input v-model="formData.company_name" :placeholder="formRules.company_name[0].message" inputAlign="right"
            :placeholder-style="placeholderStyle" :custom-style="inputStyle" />
        </u-form-item>
        <u-form-item label="统一社会信用代码" prop="credit_code">
          <u-input v-model="formData.credit_code" :placeholder="formRules.credit_code[0].message" inputAlign="right"
            :placeholder-style="placeholderStyle" :custom-style="inputStyle" />
        </u-form-item>
        <u-form-item label="法定代表人" prop="legal_person">
          <u-input v-model="formData.legal_person" :placeholder="formRules.legal_person[0].message" inputAlign="right"
            :placeholder-style="placeholderStyle" :custom-style="inputStyle" />
        </u-form-item>
        <u-form-item label="上传营业执照">
          <z-file-upload ref="uploader" :fileList="uploadImages" width="446" height="296" maxCount="1" />
        </u-form-item>
      </u-form>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view class="btn-submit mt-1" @click="onSubmit">提交</view>
    </view>
  </view>
</template>

<script setup>
import { showToast } from '@/common/util/uni';
import { postEnterpriseAuthAdd } from '@/common/http/module/user';

const props = defineProps({
  data: Object
})

const formData = reactive({
  company_name: '',
  legal_person: '',
  credit_code: '',
  business_license: '',
})

const labelStyle = {
  color: '#333333',
  fontSize: '28rpx',
  fontWeight: 'bold'
}

const inputStyle = {
  color: '#333',
  fontSize: '28rpx',
}

const uploader = ref()
const uploadImages = ref([])
const form = ref()
const formRules = {
  company_name: [{ required: true, message: '请输入企业名称', trigger: ['blur', 'change'] }],
  credit_code: [{ required: true, message: '请输入您的社会信用代码', trigger: ['blur', 'change'] }],
  legal_person: [{ required: true, message: '请输入法定代表人', trigger: ['blur', 'change'] }]
}
const placeholderStyle = "fontSize: '28rpx', color: '#999'"

function backFillFormData() {
  if (!props.data) return

  const { company_name, legal_person, credit_code, business_license } = props.data
  formData.company_name = company_name
  formData.legal_person = legal_person
  formData.credit_code = credit_code

  if (business_license) {
    uploadImages.value = [{ url: business_license }]
  }
}

function onSubmit() {
  console.log('onSubmit', formData);
  form.value.validate(valid => {
    console.log('onSubmit', valid, formData);
    if (!valid) return

    if (!uploader.value.isAllUploaded()) return
    const images = uploader.value.getUploadedList()
    if (images.length == 0) {
      showToast('请上传营业执照', 'none')
      return
    }

    const params = {
      ...formData,
      business_license: images[0].serverUrl
    }

    postEnterpriseAuthAdd(params).then(() => {
      showToast('提交申请成功')
      setTimeout(() => uni.navigateBack(), 600);
    })
  })
}

onReady(() => {
  nextTick(() => form.value.setRules(formRules))
})

onMounted(() => backFillFormData())
</script>

<style lang='scss' scoped>
.option-item {
  display: flex;
  color: #333;
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
}

.bg-audit {
  background-color: #F4AF22;
}

.bg-fail {
  background-color: #FF513A;
}

.bg-success {
  background-color: #3FB352;
}</style>
